<template>
  <div>
    <h2>员工管理</h2>
    <el-input placeholder="请输入员工姓名" v-model="searchName" style="width: 200px;" clearable></el-input>
    <el-button type="primary" @click="fetchEmployees">查询</el-button>
    <el-button type="success" @click="openDialog">新增</el-button>

    <el-table :data="employeeList" stripe>
      <el-table-column prop="name" label="员工姓名"></el-table-column>
      <el-table-column prop="type" label="计件类型"></el-table-column>
      <el-table-column prop="rate" label="员工计件基数"></el-table-column>
      <el-table-column prop="hours_worked" label="员工工时"></el-table-column>
      <el-table-column prop="createtime" label="创建时间"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="editEmployee(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteEmployee(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        layout="total, prev, pager, next, jumper"
        style="margin-top: 20px; text-align: right;"
    ></el-pagination>
    <el-dialog title="编辑员工" :visible.sync="dialogVisible">
      <el-form :model="currentEmployee" ref="employeeform" :rules="rules">
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="员工姓名" prop="name">
              <el-input v-model="currentEmployee.name" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
          <el-form-item label="计件类型" prop="type">
            <el-select v-model="currentEmployee.type" placeholder="请选择计时类型名称">
              <el-option value="">请选择</el-option>
              <el-option value="一级技工">一级技工</el-option>
              <el-option value="二级技工">二级技工</el-option>
              <el-option value="三级技工">三级技工</el-option>
            </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="6">
          <el-form-item label="员工计件基数" prop="rate">
            <el-input v-model="currentEmployee.rate" type="number"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="6">
          <el-form-item label="员工工时" prop="hours_worked">
            <el-input v-model="currentEmployee.hours_worked" type="number"></el-input>
          </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEmployee">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      searchName: '',
      employeeList: [],
      currentEmployee: {id: null, name: '', type: '', hours_worked: 0, rate: 1.0,createtime:''},
      dialogVisible: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      rules: {
        name: [{required: true, message: '请输入员工姓名', trigger: 'blur'}],
        type: [{required: true, message: '请选择计件类型', trigger: 'blur'}],
        rate: [{required: true, message: '请输入计时工资基数', trigger: 'blur'}],
        hours_worked: [{required: true, message: '请输入员工工时', trigger: 'blur'}],
      },
    };
  },
  methods: {
    async fetchEmployees() {
      try {
        const params = {
          page: this.currentPage,
          size: this.pageSize,
          name: this.searchName
        };
        axios.get('/api/employees/list', {params}).then(response => {
          this.employeeList = response.data;
          this.total = this.employeeList.length;
        });

      } catch (error) {
        console.error('获取员工列表失败', error);
      }
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.fetchEmployees();
    },
    openDialog() {
      this.currentEmployee = {id: null, name: '', type: '', hours_worked: 0, rate: 1.0, createtime: ''};
      this.dialogVisible = true;
    },
    async editEmployee(employee) {
      this.currentEmployee = {...employee};
      this.dialogVisible = true;
    },
    async deleteEmployee(employee) {
      try {
        await axios.delete(`/api/employees/delete/${employee.id}`); // 删除员工
        await this.fetchEmployees(); // 刷新员工列表
      } catch (error) {
        console.error('删除员工失败', error);
      }
    },
    async saveEmployee() {
      try {
        this.$refs.employeeform.validate(async (valid) => {
          if (valid) {
            if (this.currentEmployee.id) {
              await axios.put(`/api/employees/update`, this.currentEmployee); // 编辑工时记录
            } else {
              await axios.post('/api/employees/add', this.currentEmployee); // 新增工时记录
            }
            this.dialogVisible = false;
            await this.fetchEmployees(); // 刷新工时记录
            this.resetForm()
          }
        });
      } catch (error) {
        console.error('保存员工失败', error);
      }
    },
    resetForm() {
      this.currentEmployee = {};
    },
  },
  created() {
    this.fetchEmployees();
  },
};
</script>
